<template>
  <div class="body-bg">
    <el-container style="height: 100%; width: 100%; border: 1px; ">
      <el-aside width="200px" style="background-color: white; height:100%">
        <el-menu>
          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-message"></i>导航一
            </template>
            <el-menu-item-group>
              <template slot="title">分组一</template>
              <el-menu-item index="1-1">选项1</el-menu-item>
              <el-menu-item index="1-2">选项2</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group title="分组2">
              <el-menu-item index="1-3">选项3</el-menu-item>
            </el-menu-item-group>
            <el-submenu index="1-4">
              <template slot="title">选项4</template>
              <el-menu-item index="1-4-1">选项4-1</el-menu-item>
            </el-submenu>
          </el-submenu>
        </el-menu>
      </el-aside>

      <el-container style="margin: 0px">
        <el-header style="text-align: right; font-size: 12px">
          <el-dropdown>
            <i class="el-icon-setting" style="margin-right: 10px"></i>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>查看</el-dropdown-item>
              <el-dropdown-item>新增</el-dropdown-item>
              <el-dropdown-item>删除</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <span>王小虎</span>
        </el-header>

        <el-main>
          <div style="margin-top: 20px;margin-bottom: 10px;padding-left: 50px">
            <el-input v-model="search" size="middle" style="width: 300px;margin-right: 10px" placeholder="输入关键字搜索"/>
            <el-button @click="toggleSelection(search)">搜索</el-button>
            <el-button>批量删除</el-button>
            <el-button>添加</el-button>
          </div>
          <el-table
            border height="70%"
            :data="tableData"
            style="width: 100%"  tooltip-effect="dark">
            <el-table-column
              type="selection"
              width="55">
            </el-table-column>
            <el-table-column fixed prop="id" label="id" width="150"></el-table-column>
            <el-table-column prop="productName" label="商品名称" width="120"></el-table-column>
            <el-table-column prop="product_price" label="商品价格" width="120"></el-table-column>
            <el-table-column prop="total" label="总数" width="120"></el-table-column>
            <el-table-column align="center" label="操作" border="0">

              <template slot-scope="scope">
                <div style="text-align:center">
                  <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">Edit</el-button>
                  <el-button
                    size="mini"
                    type="danger"
                    @click="handleDelete(scope.$index, scope.row)"
                  >Delete
                  </el-button>
                </div>
              </template>
            </el-table-column>
          </el-table>
          <page></page>
        </el-main>

        <el-footer>footer</el-footer>
      </el-container>

    </el-container>

  </div>

</template>

<style>
  .body-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: whitesmoke;
    margin: 0;
    padding: 0;
  }

  .el-header {
    background-color: whitesmoke;
    color: #333;
    line-height: 60px;
  }

  .el-main {
    line-height: 10px;
  }

  .el-aside {
    color: rebeccapurple;
  }
</style>

<script>
import page from './page.vue'

export default {

  data () {
    return {
      tableData: [],
      search: ''
    }
  },
  methods: {
    toggleSelection (v1) {
      console.log(v1)
      this.$http.post('http://localhost:8001/getProductByName/' + v1).then(
        function (d) {
          console.log(d)
          if (d.body.code === 0) {
            this.tableData = d.body.data
          }
        }
      )
    },

    handleEdit (index, row) {
      console.log(index.id, row)
      // this.$http.post('http://localhost:8001/getProductByName/' + v1).then(
      //   function (d) {
      //     console.log(d)
      //     if (d.body.code === 0) {
      //       this.tableData = d.body.data
      //     }
      //   }
    },
    handleDelete (index, row) {
      console.log(row.id)
      this.$http.post('http://localhost:8001/deleteProductByid/' + row.id).then(
        function (d) {
          console.log(d)
          this.getList()
        }
      )
    },
    getList () {
      this.$http.get('http://localhost:8001/getProductList')
        .then(function (d) {
          console.log(d)
          if (d.body.code === 0) {
            this.tableData = d.body.data
          }
        })
    }
  },
  created () {
    this.getList()
  },
  components: {
    page
  }
}
</script>
